<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>去春日部兜风</title>
    <base href="/managerSystem/view/">
    <!-- vue框架： 视图的双向绑定 -->
	<script type="text/javascript" src="js/vue-2.6.10.js"></script>
	<!--  axios: 进行异步请求（数据来源与网页脱离） -->
	<script type="text/javascript" src="js/axios.js"></script>
	<link rel="stylesheet" href="css/nav.css">
	<link rel="stylesheet" href="css/index.css">

	<link rel="icon" type="image/x-ico" href="1.ico">
	
    <style>
    .content1{
	border:1px dashed;
	border-radius: 20px;
	float: left;
	margin: 5px;
	width: 330px;
	height: 330px;
}
.content2{
	border-radius: 20px 20px 0 0;
	height: 200px;
	background-color: #3EFFDB;
}
.content2 img{
	object-fit: fill;
	width: 330px;
	height: 200px;
	border-radius: 20px 20px 0 0;
}
    </style>
</head>

<body>
	<div class="all">
		<div id="container">
			<header>
				<div class="logo" id="h">
					<a href="index.html">
						<img src="images/nav/logo.png" alt="">
					</a>
				</div>
				<nav>
					<strong>
						<ul>
							<li>
								<a href="index.html">首页</a>
							</li>
							<li>
								<a href="#">今日推荐⇩</a>
								<ol>
									<li>
										<div class="jrtj">
											<img src="images/nav/jrtj.jpg" alt="">
										</div>
									</li>
								</ol>
							</li>
							<li>
								<a href="login.html">请登录</a>
							</li>
							<li> 
								<a href="register.html">免费注册</a>
							</li>
							<li>
								<a href="orders.html">我的商品</a>
							</li>
							<li>
								<a href="users.html">我的账户</a>
							</li>
							<li>
								<a href="#">更多⇩</a>
								<ol>
									<li>
										<a href="">联系我们</a>
									</li>
								</ol>
							</li>
						</ul>
					</strong>
           		</nav>
        	</header>
        	<div class="bigbox">
				<div class="left">
					<table>
						<tbody>
							<tr>
								<th>家具</th>
								<th>电器</th>
							</tr>
							<tr>
								<th>数码</th>
								<th>美妆</th>
							</tr>
							<tr>
								<th>母婴</th>
								<th>食品</th>
							</tr>
							<tr>
								<th>饰品</th>
								<th>艺术</th>
							</tr>
							<tr>
								<th>图书</th>
								<th>保健</th>
							</tr>
							<tr>
								<th>男装</th>
								<th>女装</th>
							</tr>
							<tr>
								<th>箱包</th>
								<th>二手</th>
							</tr>
							<tr>
								<th>生活</th>
								<th>医药</th>
							</tr>
						</tbody>
					</table>
				</div>
				<main>
					<div class="imgBox">
						<div id="ad">
							<div id="leftbtn">
								&lt;
							</div>
							<div id="rightbtn">
								&gt;
							</div>
						</div>
					</div>
				</main>
				<div class="right">
					<div class="threetp">
						<img src="images/nav/jrtj.jpg" alt="" />
					</div>
					<div class="threetp">
						<img src="images/nav/jrtj.jpg" alt="" />
					</div>
					<div class="threetp">
						<img src="images/nav/jrtj.jpg" alt="" />
					</div>
				</div>
			</div>
			<div class="banner">
				<div class="box">
					<div class="box1">
						<img src="images/index/gkzs.png" alt="">
						<h2>顾客至上</h2>
						<h3>本网站始终以顾客就是上帝为服务中心理念</h3>
					</div>
					<div class="box2">
						<img src="images/index/fwbz.png" alt="">
						<h2>服务保证</h2>
						<h3>对顾客有问必答，早八至晚十都有人工客服为顾客解答疑问</h3>
					</div>
					<div class="box3">
						<img src="images/index/ptaq.png" alt="">
						<h2>平台安全</h2>
						<h3>平台保障顾客信息安全，绝不外泄</h3>
					</div>
				</div>
				<div class="spgc">
					<p>☑商品广场☒</p>
					
				</div>
				<a href="addcomm.html"><h1>添加商品</h1></a>
			<div id="banner1" >
			<div v-for="c in conn" class="content1">
				<div class="content2">
					<img alt="" src="images/nav/jrtj.jpg">
				</div>
				商品：<a href="" class="name">{{c.name}}</a>
				<br>
				价钱：<a href="" class="name">{{c.sell_price}}</a>
				<br>
				产品公司：<a href="" class="description">{{c.producing_area}}</a>
				<br>
				<a :href="'updatecomm.html?id='+c.id">修改</a>
				<a href="javascript:void(0);" v-on:click="delConn(c.id)">删除</a>
			</div>
		</div>
	<script type="text/javascript">
		let vue = new Vue({
			el: '#banner1',
			data:{
				conn: []
			},
			created(){
				//url: 表示异步请求地址
				axios.get('/managerSystem/selectCommodity.do').then(
					function(res_obj){
						//使用获取的数据来给vue对象中的users数据赋值
						vue.conn = res_obj.data; 
					}
				).catch(
					function(error_obj){
						alert("网络加载异常！！！");
					}
				)
			},
			methods:{
				delUser: function(id){
					console.log(id);
					//url: 表示异步请求地址
					axios.get('/managerSystem/deleteCommodity.do?id=' + id).then(
						function(res_obj){
							//使用获取的数据来给vue对象中的users数据赋值
							//vue.users = res_obj.data; 
							window.location.href="index.html";
						}
					).catch(
						function(error_obj){
							alert("网络加载异常！！！");
						}
					)
				}
			}
		});
	</script>
				
			</div>

        </div>
		<footer>
			<div class="footer1">
				<img src="images/nav/logo.png" alt="">
			</div>
			<a href="#h"><span>⇧返回顶部</span></a>
			<div class="footer3">
				<a href=""><img src="images/nav/f1.png" alt=""></a>
				<a href=""><img src="images/nav/f2.png" alt=""></a>
				<a href=""><img src="images/nav/f3.png" alt=""></a>
				<a href=""><img src="images/nav/f4.png" alt=""></a>
			</div>
			<div class="footer2">
				<a href="">
					<h4></h4>
				</a>
			</div>
		</footer>
	</div>
	<script>
								var
	imgsURL=['images/lunbo/wo.webp','images/lunbo/hfp.jpg','images/lunbo/ggx.jpg','images/lunbo/xyj.png','images/lunbo/mf.jpg'];
	                            var arrowLeft=document.getElementById("leftbtn");
								var arrowRight=document.getElementById("rightbtn");
								function preMove(){
									index--;
									if(index < 0) index=4; document.getElementById('ad').style.backgroundImage= 'url('+imgsURL[index]+')';
								}
								function nextMove(){
									index++;
									if(index > 4) index=0; document.getElementById('ad').style.backgroundImage= 'url('+imgsURL[index]+')';
								}
								arrowLeft.addEventListener("click", preMove);
								arrowRight.addEventListener("click", preMove);
								var index=0;
								
								setInterval(nextMove,2000);//每间隔1000毫秒，调用一次nextMove函数
	</script>
</body>

</html>